Input with date validation and transformation. In browsers that do not yet support the HTML5 date input, a text element will be used. In that case, text must be entered in a valid ISO-8601 date format (yyyy-MM-dd), for example: 2009-01-06
. The model must always be a Date object.
<input type="date"
ng-model=""
[name=""]
[min=""]
[max=""]
[required=""]
[ng-required=""]
[ng-change=""]>
Param | Type | Details |
---|---|---|
ngModel | string | Assignable angular expression to data-bind to. |
name
(optional) | string | Property name of the form under which the control is published. |
min
(optional) | string | Sets the |
max
(optional) | string | Sets the |
required
(optional) | string | Sets |
ngRequired
(optional) | string | Adds |
ngChange
(optional) | string | Angular expression to be executed when input changes due to user interaction with the input element. |
<script>
angular.module('dateInputExample', [])
.controller('DateController', ['$scope', function($scope) {
$scope.value = new Date(2013, 9, 22);
}]);</script><form name="myForm" ng-controller="DateController as dateCtrl">
Pick a date between in 2013:
<input type="date" id="exampleInput" name="input" ng-model="value"
placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.date">
Not a valid date!</span>
<tt>value = {{value | date: "yyyy-MM-dd"}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/></form>
protractor.jsvar value = element(by.binding('value | date: "yyyy-MM-dd"'));var valid = element(by.binding('myForm.input.$valid'));var input = element(by.model('value'));
// currently protractor/webdriver does not support// sending keys to all known HTML5 input controls// for various browsers (see https://github.com/angular/protractor/issues/562).function setInput(val) {
// set the value of the element and force validation.
var scr = "var ipt = document.getElementById('exampleInput'); " +
"ipt.value = '" + val + "';" +
"angular.element(ipt).scope().$apply(function(s) { s.myForm[ipt.name].$setViewValue('" + val + "'); });";
browser.executeScript(scr);}
it('should initialize to model', function() {
expect(value.getText()).toContain('2013-10-22');
expect(valid.getText()).toContain('myForm.input.$valid = true');});
it('should be invalid if empty', function() {
setInput('');
expect(value.getText()).toEqual('value =');
expect(valid.getText()).toContain('myForm.input.$valid = false');});
it('should be invalid if over max', function() {
setInput('2015-01-01');
expect(value.getText()).toContain('');
expect(valid.getText()).toContain('myForm.input.$valid = false');});